<template>
	<div>
		<div class="" style="overflow-x: hidden;">
			<div>
				<div id="canvasDiv" class="canvasDiv" style="width:100%">
					<canvas id="confernceWhiteboard" width="1000" height="500"></canvas>
				</div>
				<div class="op">
					<div id="nav">
						<wbcolor class="texcolor" v-show="colorset"></wbcolor>
						<ul id="toolsul" class="tools">
							<li id="toolsPencil" data-type="pen" class="active">
								<i class="icon-tools icon-pen-select icon-pan" data-default="icon-tools icon-pen-black"></i>
							</li>
							<li data-type="remove">
								<i class="icon-tools icon-remove-black" data-default="icon-tools icon-remove-black"></i>
							</li>
							<li data-type="text">
								<i class="icon-tools icon-text-black" data-default="icon-tools icon-text-black"></i>
							</li>
							<li data-type="arrow">
								<i class="icon-tools icon-arrow-black icon-arrow" data-default="icon-tools icon-arrow-black"></i>
							</li>
							<li data-type="line">
								<i class="icon-tools icon-line-black" data-default="icon-tools icon-line-black"></i>
							</li>
							<li data-type="dottedline">
								<i class="icon-tools icon-dottedline-black" data-default="icon-tools icon-dottedline-black"></i>
							</li>
							<li data-type="circle">
								<i class="icon-tools icon-circle-black" data-default="icon-tools icon-circle-black"></i>
							</li>
							<li data-type="ellipse">
								<i class="icon-tools icon-ellipse-black" data-default="icon-tools icon-ellipse-black"></i>
							</li>
							<!--<li class="hide" data-type="square">-->
							<!--<i class="icon-tools icon-square-black" data-default='icon-tools icon-square-black'></i>-->
							<!--</li>-->
							<li data-type="rectangle">
								<i class="icon-tools icon-rectangle-black" data-default="icon-tools icon-rectangle-black"></i>
							</li>
							<li data-type="rightangle">
								<i class="icon-tools icon-rightangle-black" data-default="icon-tools icon-rightangle-black"></i>
							</li>
							<li data-type="equilateral">
								<i class="icon-tools icon-equilateral-black" data-default="icon-tools icon-equilateral-black"></i>
							</li>
							<!--<li  data-type="isosceles">-->
							<!--<i class="icon-tools icon-isosceles-black" data-default='icon-tools icon-isosceles-black'></i>-->
							<!--</li>-->
						</ul>
					</div>
				</div>
				<div class="markop">
					<button class="exit" @click="closescreenmark()">{{ $t('ivcs.close') }}</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import Wbcolor from '../components/Wbcolor';
import message from '../../static/js/message';
export default {
	components: { Wbcolor },
	data() {
		return {
			drawType: null,
			whiteboardCanvas: null,
			chache: null,
			textbox: null,
			drawingObject: null,
			mouseFrom: {},
			mouseTo: {},
			doDrawing: false,
			moveCount: 1,
			drawWidth: 2,
			color: '#E34F51',
			colorset: false,
			zoom: window.zoom ? window.zoom : 1
		};
	},
	props: ['mark'],
	mounted() {
		var self = this;

		message.$on('receiveMessage', function(message) {
			console.log('white message', message);
			self.showCache(message);
		});

		this.whiteboardCanvas = new fabric.Canvas('confernceWhiteboard');
		var theCanvas = document.getElementById('confernceWhiteboard');
		var context = theCanvas.getContext('2d');
		context.globalAlpha = 1;
		context.fillStyle = 'rgba(255, 255, 255, 0)';
		this.whiteboardCanvas.isDrawingMode = true;
		this.whiteboardCanvas.freeDrawingBrush.color = this.color;
		this.whiteboardCanvas.on('mouse:down', function(options) {
			var xy = self.transformMouse(options.e.offsetX, options.e.offsetY);
			self.mouseFrom.x = xy.x;
			self.mouseFrom.y = xy.y;
			self.doDrawing = true;
		});
		this.whiteboardCanvas.on({
			'mouse:up': options => {
				var xy = self.transformMouse(options.e.offsetX, options.e.offsetY);
				self.mouseTo.x = xy.x;
				self.mouseTo.y = xy.y;
				// drawing();
				self.drawingObject = null;
				self.moveCount = 1;
				self.doDrawing = false;
				self.updateCanvas();
			}
		});

		this.whiteboardCanvas.on('selection:created', function(e) {
			if (e.target._objects) {
				//多选删除
				var etCount = e.target._objects.length;
				for (var etindex = 0; etindex < etCount; etindex++) {
					self.whiteboardCanvas.remove(e.target._objects[etindex]);
				}
			} else {
				//单选删除
				self.whiteboardCanvas.remove(e.target);
			}
			self.whiteboardCanvas.discardActiveObject(); //清楚选中框
		});

		this.whiteboardCanvas.on('mouse:move', function(options) {
			if (self.moveCount % 2 && !self.doDrawing) {
				//减少绘制频率
				return;
			}
			self.moveCount++;
			var xy = self.transformMouse(options.e.offsetX, options.e.offsetY);
			self.mouseTo.x = xy.x;
			self.mouseTo.y = xy.y;
			self.drawing();
		});

		this.bindClick();

		message.$on('setcolor', function(color) {
			self.color = color;
			self.whiteboardCanvas.freeDrawingBrush.color = self.color;
		});
	},
	methods: {
		closescreenmark() {
			this.$emit('closescreenmark');
		},
		bindClick() {
			// 侧边栏按钮
			var self = this;
			jQuery('#toolsul')
				.find('li')
				.on('click', function() {
					//设置样式
					jQuery('#toolsul')
						.find('li>i')
						.each(function() {
							jQuery(this).attr('class', jQuery(this).attr('data-default'));
						});
					jQuery(this)
						.addClass('active')
						.siblings()
						.removeClass('active');
					jQuery(this)
						.find('i')
						.attr(
							'class',
							jQuery(this)
								.find('i')
								.attr('class')
								.replace('black', 'select')
						);
					self.drawType = jQuery(this).attr('data-type');
					self.whiteboardCanvas.isDrawingMode = false;
					if (self.textbox) {
						//退出文本编辑状态
						self.textbox.exitEditing();
						self.textbox = null;
						self.updateCanvas();
					}
					if (self.drawType == 'pen') {
						self.colorset = false;
						self.whiteboardCanvas.isDrawingMode = true;
					} else if (self.drawType == 'remove') {
						self.colorset = false;
						self.whiteboardCanvas.selection = true;
						self.whiteboardCanvas.skipTargetFind = false;
						self.whiteboardCanvas.selectable = true;
					} else if (self.drawType == 'text') {
						self.colorset = true;
						self.whiteboardCanvas.skipTargetFind = true; //画板元素不能被选中
						self.whiteboardCanvas.selection = false; //画板不显示选中
					} else {
						self.colorset = false;
						self.whiteboardCanvas.skipTargetFind = true; //画板元素不能被选中
						self.whiteboardCanvas.selection = false; //画板不显示选中
					}
				});
		},
		drawing() {
			if (this.drawingObject) {
				this.whiteboardCanvas.remove(this.drawingObject);
			}
			var canvasObject = null;
			switch (this.drawType) {
				case 'arrow': //箭头
					canvasObject = new fabric.Path(this.drawArrow(this.mouseFrom.x, this.mouseFrom.y, this.mouseTo.x, this.mouseTo.y, 30, 30), {
						stroke: this.color,
						fill: 'rgba(255,255,255,0)',
						strokeWidth: this.drawWidth
					});
					break;
				case 'line': //直线
					canvasObject = new fabric.Line([this.mouseFrom.x, this.mouseFrom.y, this.mouseTo.x, this.mouseTo.y], {
						stroke: this.color,
						strokeWidth: this.drawWidth
					});
					break;
				case 'dottedline': //虚线
					canvasObject = new fabric.Line([this.mouseFrom.x, this.mouseFrom.y, this.mouseTo.x, this.mouseTo.y], {
						strokeDashArray: [3, 1],
						stroke: this.color,
						strokeWidth: this.drawWidth
					});
					break;
				case 'circle': { //正圆
					let left = this.mouseFrom.x;
					let top = this.mouseFrom.y;
					let radius = Math.sqrt((this.mouseTo.x - left) * (this.mouseTo.x - left) + (this.mouseTo.y - top) * (this.mouseTo.y - top)) / 2;
					canvasObject = new fabric.Circle({
						left: left,
						top: top,
						stroke: this.color,
						fill: 'rgba(255, 255, 255, 0)',
						radius: radius,
						strokeWidth: this.drawWidth
					});
					break;
				}
				case 'ellipse': { //椭圆
					let left = this.mouseFrom.x;
					let top = this.mouseFrom.y;
					// let radius = Math.sqrt((this.mouseTo.x - left) * (this.mouseTo.x - left) + (this.mouseTo.y - top) * (this.mouseTo.y - top)) / 2;
					canvasObject = new fabric.Ellipse({
						left: left,
						top: top,
						stroke: this.color,
						fill: 'rgba(255, 255, 255, 0)',
						originX: 'center',
						originY: 'center',
						rx: Math.abs(left - this.mouseTo.x),
						ry: Math.abs(top - this.mouseTo.y),
						strokeWidth: this.drawWidth
					});
					break;
				}
				case 'square': //TODO:正方形（后期完善）
					break;
				case 'rectangle': { //长方形
					let path = 'M ' + this.mouseFrom.x + ' ' + this.mouseFrom.y + ' L ' + this.mouseTo.x + ' ' + this.mouseFrom.y + ' L ' + this.mouseTo.x + ' ' + this.mouseTo.y + ' L ' + this.mouseFrom.x + ' ' + this.mouseTo.y + ' L ' + this.mouseFrom.x + ' ' + this.mouseFrom.y + ' z';
					canvasObject = new fabric.Path(path, {
						left: this.mouseFrom.x,
						top: top,
						stroke: this.color,
						strokeWidth: this.drawWidth,
						fill: 'rgba(255, 255, 255, 0)'
					});
					//也可以使用fabric.Rect
					break;
				}
				case 'rightangle': { //直角三角形
					let path = 'M ' + this.mouseFrom.x + ' ' + this.mouseFrom.y + ' L ' + this.mouseFrom.x + ' ' + this.mouseTo.y + ' L ' + this.mouseTo.x + ' ' + this.mouseTo.y + ' z';
					canvasObject = new fabric.Path(path, {
						left: this.mouseFrom.x,
						top: top,
						stroke: this.color,
						strokeWidth: this.drawWidth,
						fill: 'rgba(255, 255, 255, 0)'
					});
					break;
				}
				case 'equilateral': //等边三角形
					var height = this.mouseTo.y - this.mouseFrom.y;
					canvasObject = new fabric.Triangle({
						top: this.mouseFrom.y,
						left: this.mouseFrom.x,
						width: Math.sqrt(Math.pow(height, 2) + Math.pow(height / 2.0, 2)),
						height: height,
						stroke: this.color,
						strokeWidth: this.drawWidth,
						fill: 'rgba(255,255,255,0)'
					});
					break;
				case 'isosceles':
					break;
				case 'text':
					var textbox = new fabric.Textbox('', {
						left: this.mouseFrom.x,
						top: this.mouseFrom.y,
						width: 150,
						fontSize: 18,
						borderColor: '#2c2c2c',
						fill: this.color,
						hasControls: false
					});
					this.textbox = textbox;
					this.whiteboardCanvas.add(this.textbox);
					this.textbox.enterEditing();
					this.textbox.hiddenTextarea.focus();
					console.log(this.textbox);
					break;
				case 'remove':
					break;
				default:
					break;
			}
			if (canvasObject) {
				// canvasObject.index = getCanvasObjectIndex();
				this.whiteboardCanvas.add(canvasObject); //.setActiveObject(canvasObject)
				this.drawingObject = canvasObject;
			}
		},
		drawArrow(fromX, fromY, toX, toY, theta, headlen) {
			// 绘制箭头
			theta = typeof theta != 'undefined' ? theta : 30;
			headlen = typeof theta != 'undefined' ? headlen : 10;
			// 计算各角度和对应的P2,P3坐标
			var angle = (Math.atan2(fromY - toY, fromX - toX) * 180) / Math.PI,
				angle1 = ((angle + theta) * Math.PI) / 180,
				angle2 = ((angle - theta) * Math.PI) / 180,
				topX = headlen * Math.cos(angle1),
				topY = headlen * Math.sin(angle1),
				botX = headlen * Math.cos(angle2),
				botY = headlen * Math.sin(angle2);
			var arrowX = fromX - topX,
				arrowY = fromY - topY;
			var path = ' M ' + fromX + ' ' + fromY;
			path += ' L ' + toX + ' ' + toY;
			arrowX = toX + topX;
			arrowY = toY + topY;
			path += ' M ' + arrowX + ' ' + arrowY;
			path += ' L ' + toX + ' ' + toY;
			arrowX = toX + botX;
			arrowY = toY + botY;
			path += ' L ' + arrowX + ' ' + arrowY;
			return path;
		},
		transformMouse(mouseX, mouseY) {
			return { x: mouseX / this.zoom, y: mouseY / this.zoom };
		},
		showCache(data) {
			this.whiteboardCanvas.loadFromJSON(JSON.parse(data || this.chache));
			this.whiteboardCanvas.renderAll();
		},
		updateCanvas() {
			var canvasStringify = JSON.stringify(this.whiteboardCanvas);
			this.chache = canvasStringify;
			if (!this.textbox) {
				this.sedMessage();
			}
		},
		clearCanvas() {
			this.whiteboardCanvas.clear();
		},
		sedMessage() {
			var code = this.chache;
			message.$emit('sendScreenMarkWhiteboard', code);
		}
	}
};
</script>

<style scoped>
/*@import "../../static/css/normal.css";*/
/*@import "../../static/css/whiteboard.css";*/
.markop {
	position: absolute;
	bottom: -56px;
	right: 10px;
}
.exit {
	width: 96px;
	height: 36px;
	background: rgba(82, 153, 248, 1);
	/*border:1px solid rgba(49,98,197,1);*/
	border-radius: 4px;
	font-size: 14px;
	font-family: PingFang SC;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
}
.tools {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tools li {
	/*width: 100%;*/
	width: 60px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-size: 28px;
	/*background:rgba(44,48,64,1);*/
	cursor: pointer;
	position: relative;
	opacity: 1;
}

.tools li:hover {
	/*background: #f2f1f2;*/
	background: rgba(0, 0, 0, 1);
	opacity: 0.8;
	/*background:rgba(255,255,255,1);*/
	/*opacity:0.22;*/
}

.tools li.active {
	/*background: #e34f51;*/
	background: rgba(0, 0, 0, 1);
	opacity: 0.8;
	/*background:rgba(255,255,255,1);*/
	/*opacity:0.22;*/
}

.hide {
	display: none;
}

.canvasDiv {
	position: relative;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0); /*关键点*/
}

.icon-tools {
	display: inline-block;
	width: 28px;
	height: 28px;
	/*background-image: url("../../static/whiteboardimg/pan_icon.png");*/
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-draggle-black {
	background-image: url('../../static/whiteboardimg/yidong-3.png');
}

.icon-draggle-select {
	background-image: url('../../static/whiteboardimg/yidong-3.png');
}

.icon-pan {
	background-image: url('../../static/whiteboardimg/pan_icon.png');
}

.icon-arrow {
	background-image: url('../../static/whiteboardimg/down-jiantou.png');
}

.icon-pen-black {
	background-image: url('../../static/whiteboardimg/pan_icon.png');
}

.icon-pen-select {
	background-image: url('../../static/whiteboardimg/pan_icon.png');
}

.icon-text-black {
	background-image: url('../../static/whiteboardimg/txt.png');
}

.icon-text-select {
	background-image: url('../../static/whiteboardimg/txt.png');
}

.icon-dottedline-arrow-black {
	/*background-position: -84px -56px;*/
}

.icon-dottedline-arrow-select {
	/*background-position: -112px -56px;*/
}

.icon-line-black {
	background-image: url('../../static/whiteboardimg/line.png');
}

.icon-line-select {
	background-image: url('../../static/whiteboardimg/line.png');
}

.icon-dottedline-black {
	background-image: url('../../static/whiteboardimg/xuxian.png');
}

.icon-dottedline-select {
	background-image: url('../../static/whiteboardimg/xuxian.png');
}

.icon-arrow-black {
	background-image: url('../../static/whiteboardimg/down-jiantou.png');
}

.icon-arrow-select {
	background-image: url('../../static/whiteboardimg/down-jiantou.png');
}

.icon-circle-black {
	background-image: url('../../static/whiteboardimg/yuan-2.png');
}

.icon-circle-select {
	background-image: url('../../static/whiteboardimg/yuan-2.png');
}

.icon-ellipse-black {
	background-image: url('../../static/whiteboardimg/tuoyuan.png');
}

.icon-ellipse-select {
	background-image: url('../../static/whiteboardimg/tuoyuan.png');
}

.icon-square-black {
	background-image: url('../../static/whiteboardimg/juxing.png');
}

.icon-square-select {
	background-image: url('../../static/whiteboardimg/juxing.png');
}

.icon-rectangle-black {
	background-image: url('../../static/whiteboardimg/juxing.png');
}

.icon-rectangle-select {
	background-image: url('../../static/whiteboardimg/juxing.png');
}

.icon-rightangle-black {
	background-image: url('../../static/whiteboardimg/zhijiaosanjiaoxing.png');
}

.icon-rightangle-select {
	background-image: url('../../static/whiteboardimg/zhijiaosanjiaoxing.png');
}

.icon-equilateral-black {
	background-image: url('../../static/whiteboardimg/sanjiaoxing.png');
}

.icon-equilateral-select {
	background-image: url('../../static/whiteboardimg/sanjiaoxing.png');
}

.icon-isosceles-black {
	background-position: -196px -112px;
}

.icon-isosceles-select {
	background-position: -0px -140px;
}

.icon-isoscelesrighttriangle-black {
	background-position: -28px -140px;
}

.icon-isoscelesrighttriangle-select {
	background-position: -56px -140px;
}

.icon-remove-black {
	background-image: url('../../static/whiteboardimg/xiangpica.png');
}

.icon-remove-select {
	background-image: url('../../static/whiteboardimg/xiangpica.png');
}

.icon-clear-black {
	background-position: -140px -140px;
}

.icon-clear-select {
	background-position: -168px -140px;
}

.video-preview-modal-div {
	width: 69%;
	margin: 5% auto 0;
	text-align: center;
	background-color: #ffffff;
}

/********* 添加对错号 **************/
.icon-right-black {
	display: inline-block;
	width: 26px;
	height: 26px;
	background-image: url(../../static/whiteboardimg/right.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-right-select {
	display: inline-block;
	width: 26px;
	height: 26px;
	background-image: url(../../static/whiteboardimg/right-sel.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-wrong-black {
	display: inline-block;
	width: 26px;
	height: 26px;
	background-image: url(../../static/whiteboardimg/wrong.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-wrong-select {
	display: inline-block;
	width: 26px;
	height: 26px;
	background-image: url(../../static/whiteboardimg/wrong-sel.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-right-small-black {
	display: inline-block;
	width: 28px;
	height: 28px;
	background-image: url(../../static/whiteboardimg/right-small.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-right-small-select {
	display: inline-block;
	width: 28px;
	height: 28px;
	background-image: url(../../static/whiteboardimg/right-small-sel.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-wrong-small-black {
	display: inline-block;
	width: 28px;
	height: 28px;
	background-image: url(../../static/whiteboardimg/wrong-small.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-wrong-small-select {
	display: inline-block;
	width: 28px;
	height: 28px;
	background-image: url(../../static/whiteboardimg/wrong-small-sel.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-submit-black {
	display: inline-block;
	width: 28px;
	height: 28px;
	background-image: url(../../static/whiteboardimg/submit.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

.icon-submit-select {
	display: inline-block;
	width: 28px;
	height: 28px;
	background-image: url(../../static/whiteboardimg/submit-sel.png);
	background-repeat: no-repeat;
	margin-top: 10px;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.btn {
	width: 200px;
	height: 40px;
	border: 0px solid black;
	background-color: #e1e1e1;
	line-height: 40px;
	color: white;
	text-align: center;
	font-size: 16px;
}

.btnwh {
	width: 200px;
	height: 40px;
}

.tipwh {
	width: 400px;
	height: 40px;
}

.default-color {
	background-color: #2579d1;
}

.btn:hover {
	background-color: #2579d1;
}

.btn:focus {
	background-color: #2579d1;
	/*#00ff00;*/
}

.btn:active {
	background-color: #000000;
}

.flex-conlumn-center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.margin-left20 {
	margin-left: 20px;
}

.flex-conlumn-start {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}

.self-item {
	align-self: flex-start;
}

.flex-row-center {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	/*background-color: red;*/
}

.flex-row-start {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	/*background-color: red;*/
}

.margin-top10 {
	margin-top: 10px;
}

.w100h40 {
	width: 100px;
	height: 40px;
}

.w150h40 {
	width: 150px;
	height: 40px;
}

.w120h40 {
	width: 120px;
	height: 40px;
}

.w300h40 {
	width: 300px;
	height: 40px;
}

.w160h40 {
	width: 160px;
	height: 40px;
}

.margin-left10 {
	margin-left: 10px;
}
.margin-left20 {
	margin-left: 20px;
}

.w70h40 {
	width: 70px;
	height: 40px;
}

.w50h40 {
	width: 50px;
	height: 40px;
}

.normal-text {
	font-size: 15px;
	color: #333333;
	height: 30px;
	line-height: 30px;
}

.tip-text {
	color: #2579d1;
	font-size: 13px;
	height: 40px;
}

.h40 {
	height: 40px;
}

.margin-top20 {
	margin-top: 20px;
}

.margin-top40 {
	margin-top: 40px;
}

.input-normal-w250 {
	border: 0.5px solid #999999;
	width: 250px;
	height: 40px;
	text-indent: 10px;
}

.input-normal {
	border: 0.5px solid #999999;
	width: 300px;
	height: 40px;
	text-indent: 10px;
}

.narrow {
	width: 50px;
	height: 50px;
	background-color: #242020;
	border-radius: 25px;
	line-height: 50px;
	position: absolute;
	right: 5px;
	bottom: 20px;
	cursor: pointer;
	z-index: 1;
	color: #fff;
}

button {
	display: block;
	margin: auto;
	margin-top: 10px;
	clear: both;
}

.op {
	margin-top: 10px;
	width: 100%;
	height: 50px;
	/*background:rgba(31,33,45,1);*/
	/*background:linear-gradient(0deg,rgba(0,0,0,1) 0%,rgba(69,69,69,1) 100%);*/
	/*border-radius:4px;*/
}

#nav {
	width: 660px;
	height: 50px;
	/*background:rgba(31,33,45,1);*/
	background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(69, 69, 69, 1) 100%);
	border-radius: 4px;
	margin: 0 auto;
	position: relative;
}

.texcolor {
	/*margin-left: 30px;*/
	left: 35px;
	bottom: 45px;
	position: absolute;
	z-index: 2;
}

#nav ul {
	list-style: none;
	border-radius: 24px;
	/*margin-left: 50px;*/
}

#nav li {
	display: inline;
	line-height: 50px;
	float: left;
}

.exit {
	margin-bottom: 10px;
	margin-right: 0px;
}

.row::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.row canvas {
	border: 2px solid black;
}
</style>
